To start, Open up Google Chrome Browser from the Start Menu.
Next, access the following web map example from the opened Chrome Browser:
https://www.oilmap.xyz/
Next, activate Developer Tools from the top, right-side kebab button:
Developer Tools
This will open an interface in which we can view both web page code
(Elements) and the web page performance (Console). Notice that the
Elements tab is currently active, and the web page element with the
nav id = menu is highlighted. We can see both the menu html
and the menu css as well as the element highlighted at the web page
itself as nav#menu at the far left:
Elements open with element nav id = menu
highlighted
To follow, a short series of web map examples. After the class, during the upcoming assignment week, review some of these web map examples using Developer Tools. Become familiar with how Developer Tools is able to isolate different page elements and report back code information about those elements.
To start this upcoming week assignment, you will create your CARTO user account that will be used throughout the course. Here we will preview the login location and the initial platform interface:
https://thenewschool.carto.com/signup
Once logged in, the upper
left menu bar will feature two locations - Maps and Data. In the
upcoming week’s assignment, you will make your first CARTO web map using
both options:
CARTO Maps | Data
A code editor will be utilized throughout the course to write, test and produce code for weekly mapping assignments as well as the final project. There are many code editors that are freely available and quite good. We will utilize VS Code as our desktop editor. The VS Code editor will be installed into the lab computers for the course. To follow, we will open the editor on the lab computers and load in a critical extension - Live Server.
To start, download and unzip the code
test. We will open the folder from within VS Code. Once opened, we
will see 2 .html and 1 .js documents. These 3
documents mirror the AJAX example shown in this week’s lecture 1:
VS Code Editor Folder Interface
index.html
ajax_info_html
demo.js
Next, we will install the Live Server extension and test the code once the extension is enabled:
Installing Live Server Extension
Throughout the course there will be instances where code assistance is needed. We will utilize the course Slack workplace as the communication platform during the week; and the technical q/a channel will be where typical questions will be posted. In addition to this primary resource, all students should be checking GIS stackexchange:
GIS stackexchange - query = CARTO
By searching related stackexchange posts for a particular problem (creating successful queries is both art + experience), you will often find at least one, if not several, approaches to a particular coding problem.
In the first week assignment, you will map a dataset within your CARTO account. Throughout the course, we will discuss where to gain data with a permissible license to use in an online context; for now, anything that you make on your own would be generally be permissible within CARTO.
A simple option to create data quickly can be done via geojson.io. Navigate to
the site, create a simple dataset - points, lines, polygons - and
download as a .geojson file format:
Creating points in geojson.io
As a result, a map.geojson file will be created and
downloaded to your local drive. This process can be used to create and
load geodata to your CARTO account in your week 1 assignment.